<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>组件</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <ol>
      <todo-item v-for="item in todos" v-bind:todo="item"></todo-item>
    </ol>
  </div>

  <script>
    const vm = Vue.createApp({
      data() {
        return {
          todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
          ]
        }
      }
    });
    vm.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    });
    vm.mount('#app')
  </script>
</body>

</html>